<template>
	<t-modal title="导入数据" width="700px" :visible="visible" :footer="currentStep==0?null:undefined" @ok="confirm" @cancel="cancel" okText="导出" cancelText="关闭">
		<a-steps :current="currentStep" size="default" :style="stepStyle">
			<a-step :title="item.name" v-for="(item, index) in stepList" :key="index" />
		</a-steps>
		<div v-show="currentStep === 0">
			<a-spin :spinning="uploading" tip="正在上传...">
				<a-upload-dragger
					style="width: 100%;"
					name="file"
					accept=".xls, .xlsx"
					:showUploadList="false"
					:action="uploadAction"
					:headers="headersConfig"
					@change="handleChange"
				>
					<p class="ant-upload-drag-icon">
						<a-icon type="inbox" />
					</p>
					<p class="ant-upload-text">
						点击或拖动文件到此区域以上传
					</p>
					<p class="ant-upload-hint">
						把填入数据的模板上传，文件名后缀必须是*.xls、*.xlsx，文件大小不能超过10M
					</p>
				</a-upload-dragger>
				<div class="text-bold margin-top-xs">
					<a-icon type="download"></a-icon>
					为了保证数据导入顺利，推荐您下载使用<a @click="downloadTemplate">导入模版</a>，并按照规范示例录入数据。
				</div>
				<div class="text-xxs margin-top upload-explain">
					<p>上传的 Excel 表符合以下规范:</p>
					<p>• 文件大小不超过<span class="text-bold">10M</span>，且单个sheet页数据量不超过5000行。当触发校验规则、关联业务规则和第三方服务回调时，单个sheet页数据量不超过5000 行</p>
					<p>• 仅支持<span class="text-bold">(*.xls 和 *.xlsx)</span>文件</p>
					<p>• 请确保您需要导入的sheet表头中<span class="text-bold">不包含空的单元格</span>，否则该sheet页数据系统将不做导入</p>
					<p>• 批量导入的数据不支持以“内置变量”作为条件的过滤</p>
					<p>• 导入文件<span class="text-bold">不支持Excel公式计算</span>，如SUM，=H2*J2等</p>
					<p>• 目前导入<span class="text-bold">图片/附件</span>会转存，占用一定附件容量</p>
				</div>
			</a-spin>
		</div>
		<div v-show="currentStep === 1" :style="{paddingBottom: dataSource.length > 10?'45px':''}">
			<a-table
				:columns="columns"
				:data-source="dataSource"
				:pagination="pagination"
				:scroll="scrollXY"
			></a-table>
		</div>
		<div class="text-center" v-show="currentStep === 2">
			<a-spin :spinning="importLoading" />
			<div class="margin-left-xs">正在导入数据，请耐心等待</div>
		</div>
		<template slot="footer">
			<a-button :disabled="prevBtnDisabled" v-show="currentStep != 0" @click="changeCurrentIndex('prevStep')">
				上一步
			</a-button>
			<a-button type="primary" @click="changeCurrentIndex('nextStep')">
				导入
			</a-button>
		</template>
	</t-modal>
</template>

<script>
	import Vue from 'vue'
	import { baseUrl } from "@/services/baseUrl.js";
	import { ACCESS_TOKEN } from '@/store/mutation-types'
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			action: {
			  type: String,
			  default: "/mdata/organization/importOrganizationTemplate",
			}
		},
		data() {
			return {
				labelCol: {
					xs: {
						span: 24,
					},
					sm: {
				  span: 4,
					},
				},
				wrapperCol: {
					xs: {
						span: 24,
					},
					sm: {
						span: 20,
					},
				},
				form: this.$form.createForm(this),
				currentStep: 0,
				stepStyle: {
					padding: '10px 30px 20px',
				},
				stepList: [{
					name: "上传数据",
					key: 1
				},
				{
					name: "预览数据",
					key: 2
				},
				{
					name: "开始导入",
					key: 3
				}],
				prevBtnDisabled: false,
				uploadAction: baseUrl + this.action,
				headersConfig: {},
				uploading: false,
				importLoading: false,
				columns: [{
          title: "名称",
          dataIndex: "orgName",
        },{
          title: "编码",
          dataIndex: "orgCode",
        },{
          title: "类型",
          dataIndex: "orgType",
        },{
          title: "负责人",
          dataIndex: "orgPerson",
        }],
				dataSource: [],
				pagination: {
				  pageSize: 10,
				  showSizeChanger: true,
				  hideOnSinglePage: true,
				  onShowSizeChange: (current, pageSize) =>
				    this.onShowSizeChange(current, pageSize),
				},
				uploadFileAddress: "",
				bucket: "",
				fileName: ""
			}
		},
		computed: {
			scrollXY() {
			  const tdHeight = this.dataSource?.length * 40 ?? 0;
			  return { y: 360, x: '100%'};
			}
		},
		mounted() {
			const token = Vue.ls.get(ACCESS_TOKEN);
			this.headersConfig.token = token;
		},
		methods: {
			confirm() {

			},
			cancel() {
				this.$emit("cancel");
			},
			changeCurrentIndex(e) {
				if (e === "prevStep") {
					this.currentStep -= 1;
				} else if (e === "nextStep") {
					this.currentStep += 1;
					if (this.currentStep === 2) {
						this.importLoading = true;
						this.prevBtnDisabled = true;
						this.$post("/mdata/organization/importOrganizationData", {
							uploadFileAddress: this.uploadFileAddress,
							bucket: this.bucket,
							fileName: this.fileName
						}).then(res => {
							this.importLoading = false;
						})
					}
				}
			},
			downloadTemplate() {
				window.location.href = baseUrl + "/mdata/organization/downloadOrganizationTemplate?token=" + Vue.ls.get(ACCESS_TOKEN);
			},
			handleChange(info) {
				this.uploading = true;
				const status = info.file.status;
				if (status !== 'uploading') {
					this.uploading = false;
				}
				if (status === 'done') {
					this.currentStep += 1;
					this.dataSource = info.file.response.data;
					this.uploadFileAddress = info.file.response.uploadFileAddress;
					this.bucket = info.file.response.bucket;
					this.fileName = info.file.response.fileName;
					const pager = { ...this.pagination };
					pager.total = this.dataSource.length;
					this.pagination = pager;
					this.$message.success(`${info.file.name} 上传成功`);
				} else if (status === 'error') {
					this.$message.error(`${info.file.name} 上传失败`);
				}
			},
			onShowSizeChange(current, pageSize) {
				const pager = {...this.pagination };
				pager.pageSize = pageSize;
				pager.hideOnSinglePage = false;
				this.pagination = pager;
			}
			
		}
	}
</script>

<style lang="less" scoped="scoped">
	.text-bold{
		color: black;
	}
	.upload-explain{
		p{
			margin-bottom: 5px;
		}
	}
	/deep/.ant-table-tbody>tr>td, /deep/.ant-table-thead>tr>th{
		padding: 6px !important;
	}
	/deep/.ant-table-pagination > li{
		min-width: 24px;
		height: 24px;
		line-height: 24px;
	}
	/deep/.ant-select-selection{
		height: 24px;
	}
	/deep/.ant-select-selection__rendered{
		line-height: 24px;
	}
</style>
